    <template>
    <div class="record-container">
        <!-- 顶部选择区域 -->
        <div class="header-filters">
            <el-select v-model="nursingUnit" placeholder="护理区" class="filter-item">
                <el-option label="1病区" value="1病区" />
                <el-option label="2病区" value="2病区" />
                <el-option label="3病区" value="3病区" />
            </el-select>
            <el-select v-model="ward" placeholder="病房" class="filter-item">
                <el-option label="1病房" value="1病房" />
                <el-option label="2病房" value="2病房" />
                <el-option label="3病房" value="3病房" />
            </el-select>
            <el-select v-model="info.bedCode" @change="getRecordList()" placeholder="床位" class="filter-item">
                <el-option label="C001" value="C001" />
                <el-option label="C002" value="C002" />
                <el-option label="C003" value="C003" />
            </el-select>
            <div class="title">护理记录单</div>
            <el-button type="primary" @click="exportData">导出</el-button>
            <el-button type="primary" @click="getRecordList()">查询</el-button>
        </div>

        <!-- 患者信息区域 -->
        <div class="patient-info">
            <div class="info-item">
                <span class="label">姓名:</span>
                <span class="value">{{ patientInfo.name }}</span>
            </div>
            <div class="info-item">
                <span class="label">年龄:</span>
                <span class="value">{{ patientInfo.age }}岁</span>
            </div>
            <div class="info-item">
                <span class="label">性别:</span>
                <span class="value">{{ patientInfo.gender=0?'女':'男' }}</span>
            </div>
            <div class="info-item">
                <span class="label">科室:</span>
                <span class="value">{{ patientInfo.department }}</span>
            </div>
            <div class="info-item">
                <span class="label">床号:</span>
                <span class="value">{{ patientInfo.bedNumber }}</span>
            </div>
            <div class="info-item">
                <span class="label">入院日期:</span>
                <span class="value">{{ patientInfo.admissionDate }}</span>
            </div>
            <div class="info-item">
                <span class="label">住院号:</span>
                <span class="value">{{ patientInfo.hospitalNumber }}</span>
            </div>
            <div class="info-item">
                <span class="label">诊断:</span>
                <span class="value">{{ patientInfo.diagnosis }}</span>
            </div>
        </div>

        <!-- 记录表格 -->
        <el-table :data="recordList" border style="width: 100%">
           
            <el-table-column prop="temperature" label="体温 ℃" width="100" />
            <el-table-column prop="heartRate" label="心率 次/分" width="120" />
            <el-table-column prop="breathe" label="呼吸 次/分" width="120" />
            <el-table-column label="血压 mmHg" width="120" >
                <template #default="scope">
                    {{ scope.row.maxBP }}/{{ scope.row.minBP }}
                </template>
            </el-table-column>
            <el-table-column prop="oximetry" label="血氧饱和度 %" width="140" />
            <el-table-column prop="measures" label="护理措施及效果" min-width="250" />
            <el-table-column label="护士签名" width="120">
                <template #default="scope">
                    <img 
                        :src="scope.row.signUrl" 
                        class="signature-img"
                        v-if="scope.row.signUrl"
                    />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import http from '@/api/http.js'

// 筛选条件
const nursingUnit = ref('')
const ward = ref('')
const bedNo = ref('')

// 患者信息
const patientInfo = reactive({
    name: '贺某某',
    age: '15',
    gender: '男',
    department: '12病区',
    bedNumber: '01床',
    admissionDate: '2019-4-18',
    hospitalNumber: '0055463',
    diagnosis: ''
})

// 记录列表数据
const recordList = ref([
  
])
const info=reactive({
    bedCode:""
})

const getRecordList = () => {
    http.get('/api/PatientReCord/GetPatientReCord?bedCode='+info.bedCode).then(res => {
        console.log('res', res)
        // 这里可以处理数据
        recordList.value=res.data
        patientInfo.name=res.data[0].name
        patientInfo.age=res.data[0].age
        patientInfo.gender=res.data[0].sex
        patientInfo.department=res.data[0].officeName
        patientInfo.bedNumber=res.data[0].bedCode
    })
    
}
onMounted(()=>{
    getRecordList();
})


// 导出数据
const exportData = () => {
    console.log('导出数据')
}
</script>

<style scoped>
.record-container {
    padding: 20px;
    background-color: #fff;
}

.header-filters {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.filter-item {
    width: 120px;
}

.title {
    flex: 1;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.patient-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    color: #606266;
}

.value {
    color: #333;
}

.signature-img {
    height: 40px;
    max-width: 100px;
    object-fit: contain;
}

:deep(.el-table) {
    margin-top: 20px;
}

:deep(.el-table th) {
    background-color: #f5f7fa;
    color: #606266;
}

:deep(.el-table td) {
    padding: 8px 0;
}
</style>
